/**
 * 评论组件
 */

import React, { Component } from 'react'

import config from '~/static/config'
import moment from 'moment'

import { LoadingOutlined, CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons'
import { Input, message } from 'antd'

const { Search } = Input

class Comment extends Component {

    state = {
        visible: false,
        loading: false,
        commentLoading: false,
        commentVal: ''
    }

    componentDidMount() {
        this.setState({ visible: this.props.visible })
    }

    handleCommentPag = () => {
        this.setState({
            visible: !this.state.visible
        }, () => {
            this.fetchCommentList()
        })
    }

    fetchCommentList = () => {
        this.setState({
            loading: true
        }, () => {
            setTimeout(() => {
                this.setState({ loading: false })
            }, 300)
        })
    }

    handleChange = ({ currentTarget } = target) => {
        this.setState({ commentVal: currentTarget.value })
    }

    //发表评论
    handlePublish = (value) => {
        if (!value) return message.warning('请输入正确的内容')

        const {
            id
        } = this.props

        let body = new FormData()

        body.append('id', id)
        body.append('name', '匿名')
        body.append('content', value)
        body.append('time', Math.round(moment().valueOf() / 1000))

        this.setState({
            commentLoading: true
        }, () => {
            fetch(`${config.baseURL}/blog/commentAdd`, {
                method: "POST",
                body
            })
                .then(response => {
                    return response.json()
                })
                .then(res => {
                    this.setState({
                        commentLoading: false,
                        commentVal: ''
                    })

                    message.success(res.data)

                    this.props.refetchData()
                })
                .catch(err => {
                    this.setState({
                        commentLoading: false,
                        commentVal: ''
                    })
                    message.error('评论失败')
                })
        })
    }

    render() {

        const {
            data
        } = this.props

        const {
            visible,
            loading,
            commentLoading,
            commentVal,
        } = this.state

        return (<div className='comment'>
            <div onClick={this.handleCommentPag}>评论({data.length}) {visible ? <CaretDownOutlined /> : <CaretUpOutlined />}</div>

            {visible && (loading ? <div className='loading'><LoadingOutlined /></div> : <div className='list'>
                {data.length > 0 ? data.map((itm, idx) => (
                    <div className='item' key={idx}>
                        <div className='name'>{itm.commentName} {moment(+itm.commentTime * 1000).format('YYYY-MM-DD HH:mm:ss')}</div>
                        <div className='content'>{itm.commentContent}</div>
                    </div>
                )) : <div className='empty'>快，沙发是你的！</div>}
                <div className='cipt'>
                    <Search
                        value={commentVal}
                        disabled={commentLoading}
                        placeholder="我想说..."
                        enterButton="发表"
                        size="small"
                        onSearch={this.handlePublish}
                        onChange={this.handleChange}
                        loading={commentLoading}
                    />
                </div>
            </div>)}

            {/* 样式 */}
            <style jsx>{`
                .empty {
                    margin 20px 0;
                    color: #f39d38;
                }
                .loading {
                    font-size: 30px;
                    text-align: center;
                    color: #ffffff;
                }
                .comment {
                    margin-top: 12px;
                    cursor: pointer;
                }
                .list {
                    box-sizing: border-box;
                    margin-top: 10px;
                    padding-left: 20px;
                }
                .item {
                    border-top: 1px solid #ffffff;
                    padding: 10px 0;
                }
                .name {
                    color: #738a94;
                }
                .content {
                    margin-top: 6px;
                    text-indent: 20px;
                    color: #737373;
                }
                .cipt {
                    margin-top: 10px;
                }
            `}</style>
        </div>)
    }
}

Comment.defaultProps = {
    visible: false,
    data: [],
}

export default Comment